<template>
    <el-row>
        <el-col :span="24">
            <el-table :data="tableData" size="mini" max-height="500">
                <el-table-column type="index" label="序号" align="center"></el-table-column>
                <el-table-column label="设备与端口" align="center">
                    <el-table-column label="设备" align="center">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.startDeviceId" placeholder="选择设备" size="mini" clearable :style="{width: '100%'}"
                            @change="startDeviceIdChange(scope.$index, scope.row.startDeviceId)">
                                <el-option v-for="(item, index) in deviceList" :key="index" :label="item.nodeName" :value="item.nodeId"></el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column label="面" align="center">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.startDeviceFaceId" placeholder="选择面" size="mini" clearable :style="{width: '100%'}"
                            @change="startFaceIdChange(scope.$index, scope.row.startDeviceFaceId)">
                                <el-option v-for="(item, index) in device_face_port[`${scope.row.startDeviceId}`]" :key="index" :label="$utils.handleServiceI18n(item.faceName)" :value="item.faceId"></el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column label="端口" align="center">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.startPortId" placeholder="选择端口" size="mini" clearable :style="{width: '100%'}"
                            @change="changePort(`${scope.row.startDeviceId}_${scope.row.startDeviceFaceId}`, scope.row.startPortId)">
                                <el-option v-for="(item, index) in device_face_port[`${scope.row.startDeviceId}_${scope.row.startDeviceFaceId}`]" :key="index" :label="item.portName" :value="item.portId" :disabled="item.disabled"></el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="设备与端口" align="center">
                    <el-table-column label="设备" align="center">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.endDeviceId" placeholder="选择设备" size="mini" clearable :style="{width: '100%'}"
                            @change="endDevicedIdChange(scope.$index, scope.row.endDeviceId)">
                                <el-option v-for="(item, index) in deviceList" :key="index" :label="item.nodeName" :value="item.nodeId"></el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column label="面" align="center">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.endDeviceFaceId" placeholder="请选择端口" size="mini" clearable :style="{width: '100%'}"
                            @change="endFaceIdChange(scope.$index, scope.row.endDeviceFaceId)">
                                <el-option v-for="(item, index) in device_face_port[`${scope.row.endDeviceId}`]" :key="index" :label="$utils.handleServiceI18n(item.faceName)" :value="item.faceId"></el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column label="端口" align="center">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.endPortId" @change="changePort(`${scope.row.endDeviceId}_${scope.row.endDeviceFaceId}`, scope.row.endPortId)" aria-atomic="请选择端口" size="mini" clearable :style="{width: '100%'}">
                                <el-option v-for="(item, index) in device_face_port[`${scope.row.endDeviceId}_${scope.row.endDeviceFaceId}`]" :key="index" :label="item.portName" :value="item.portId"  :disabled="item.disabled"></el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="small">
                            <i class="el-icon-plus" style="font-size: 1.1em;font-weight: 900;margin-right: 15px" title="新增" @click="addBtn"/>
                            <i class="el-icon-minus" style="font-size: 1.1em;font-weight: 900;" title="删除" v-show="tableData.length !== 1" @click="reduceBtn(scope)"/>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
        <el-col :span="24" style="text-align: center;padding: 10px 0;">
            <!-- <el-button type="primary" size="mini" @click="">取 消</el-button> -->
            <el-button type="primary" size="mini" @click="submitForm">确 定</el-button>
        </el-col>
    </el-row>
</template>
<script>
export default {
    computed: {
    },
    data () {
        return {
            node: null,
            deviceList: [],
            tableData: [
                {
                    startDeviceId: '',
                    startDeviceFaceId: '',
                    startPortId: '',
                    endDeviceId: '',
                    endDeviceFaceId: '',
                    endPortId: '',
                    startFaceList: [],
                    startPortList: [],
                    endFaceList: [],
                    endPortList: [],
                }
            ],
            device_face_port: {}, // 设备端口面组合
        }
    },
    methods: {
        // 切换端口
        changePort(key, id) {
            this.device_face_port[key] = this.device_face_port[key].map((v) => {
                if(id === v.portId || v.status !== 'idle') {
                    console.log(id, v)
                    return Object.assign(v, {
                        disabled: true
                    })
                } else {
                    return Object.assign(v, {
                        disabled: false
                    })
                }
            })
        },
        addBtn () {
            this.tableData.push({
                startDeviceId: '',
                startDeviceFaceId: '',
                startPortId: '',
                endDeviceId: '',
                endDeviceFaceId: '',
                endPortId: '',
                startFaceList: [],
                startPortList: [],
                endFaceList: [],
                endPortList: [],
            })
        },
        reduceBtn (row) {
            this.tableData.splice(row.$index, 1);
        },
        submitForm () {
            let arr = [];
            this.tableData.forEach(ele => {
                arr.push({
                    id: ele.id || null,
                    startDeviceId: ele.startDeviceId,
                    startDeviceFaceId: ele.startDeviceFaceId,
                    startPortId: ele.startPortId,
                    endDeviceId: ele.endDeviceId,
                    endDeviceFaceId: ele.endDeviceFaceId,
                    endPortId: ele.endPortId
                })
            })
            this.$emit('changeLine', {
                uuid: this.node.uuid,
                params: {
                    connRelates: arr,
                }
            })
        },
        init (data, item) {
            this.node = item;
            this.getNodeDetails([this.node.from_deviceId, this.node.to_deviceId]).then(res => {
                // 根据设备id查找设备面和端口数据
                if (item.connRelates && item.connRelates.length) {
                    this.tableData = [...item.connRelates];
                }
            });
        },
        initTable (data) {
            data.forEach(ele1 => {
                ele1.startFaceList = [];
                ele1.startPortList = [];
                ele1.endFaceList = [];
                ele1.endPortList = [];
                this.deviceList.forEach(ele2 => {
                    if (ele1.startDeviceId === ele2.nodeId) {
                        if (ele2.deviceProp && ele2.deviceProp.afsInfo && ele2.deviceProp.afsInfo.afsFaceList) {
                            ele2.deviceProp.afsInfo.afsFaceList.forEach(ele3 => {
                                ele1.startFaceList.push({
                                    faceName: ele3.faceName,
                                    faceId: ele3.faceId,
                                    portList: ele3.portList,
                                })
                                if (ele1.startDeviceFaceId === ele3.faceId) {
                                    ele3.portList.forEach(ele4 => {
                                        ele1.startPortList.push({
                                            portName: ele4.portName,
                                            portId: ele4.portId,
                                            status: ele4.status
                                        })
                                    })
                                }
                            })
                        }
                    }
                    if (ele1.endDeviceId === ele2.nodeId) {
                        if (ele2.deviceProp && ele2.deviceProp.afsInfo && ele2.deviceProp.afsInfo.afsFaceList) {
                            ele2.deviceProp.afsInfo.afsFaceList.forEach(ele3 => {
                                ele1.endFaceList.push({
                                    faceName: ele3.faceName,
                                    faceId: ele3.faceId,
                                    portList: ele3.portList,
                                })
                                if (ele1.endDeviceFaceId === ele3.faceId) {
                                    ele3.portList.forEach(ele4 => {
                                        ele1.endPortList.push({
                                            portName: ele4.portName,
                                            portId: ele4.portId,
                                            status: ele4.status
                                        })
                                    })
                                }
                            })
                        }
                    }
                })
            })
            console.log(data)
        },
        getNodeDetails (ids) {
            this.deviceList = [];
            return this.$store.dispatch(`clusters/getClusterNodes`, ids).then(res => {
                if (!res || !res.length) return
                        console.log('-- this.device_face_port --', res)
                    res.forEach(ele1 => {
                        this.deviceList.push({
                            nodeName: ele1.nodeName,
                            nodeId: ele1.nodeId,
                            deviceProp: ele1.deviceProp || {},
                        })
                        if (ele1.deviceProp && ele1.deviceProp.afsInfo && ele1.deviceProp.afsInfo.afsFaceList) {
                            let faceList = [];
                            ele1.deviceProp.afsInfo.afsFaceList.forEach(ele2 => {
                                faceList.push({
                                    faceName: ele2.faceName,
                                    faceId: ele2.faceId,
                                })
                                if (ele2.portList && ele2.portList.length) {
                                    let portList = [];
                                    ele2.portList.forEach(ele3 => {
                                        portList.push({
                                            portName: ele3.portName,
                                            portId: ele3.portId,
                                            disabled: ele3.status !== 'idle',
                                            status: ele3.status
                                        })
                                    })
                                    this.device_face_port[`${ele1.nodeId}_${ele2.faceId}`] = portList;
                                }
                            })
                            this.device_face_port[`${ele1.nodeId}`] = faceList;
                        }
                    });
            }).catch(() => {});
        },
        startDeviceIdChange (index, id) {
            this.tableData[index].startDeviceFaceId = '';
            this.tableData[index].startPortId = '';
        },
        startFaceIdChange (index, id) {
            this.tableData[index].startPortId = '';
        },
        endDevicedIdChange (index, id) {
            this.tableData[index].endDeviceFaceId = '';
            this.tableData[index].endPortId = '';
        },
        endFaceIdChange (index, id) {
            this.tableData[index].endPortId = '';
        }
    },
    mounted () {

    }
}
</script>
